<route lang="yaml">
  meta:
    title: 库存管理
  </route>

<script setup lang="ts">
const city = ref<string[]>([]) // 多选需要数组类型
interface warehouseProject {
  id: number // 库存编号
  warehouseName: string // 仓库名称
  locationName: string // 库位名称
  locationId: string // 库位ID
  productName: string // 商品名称
  productId: string // 商品ID
  size: string
  weight: string
  quantity: number // 数量
  price: number // 价格
  createTime: string
  expiredTime: string // 过期时间
  status: '冻结' | '正常' //  状态
}

// 表格数据
const tableData = ref<warehouseProject[]>([
  {
    id: 1,
    warehouseName: '中心仓库',
    locationName: 'A区货架1层',
    locationId: 'LOC-A-01',
    productName: '笔记本电脑',
    productId: 'P1001',
    size: '35×25×3',
    weight: '2.5kg',
    quantity: 50,
    price: 6999.00,
    createTime: '2023-01-01',
    expiredTime: '',
    status: '正常',
  },
  {
    id: 2,
    warehouseName: '中心仓库',
    locationName: 'B区货架3层',
    locationId: 'LOC-B-03',
    productName: '无线鼠标',
    productId: 'P2002',
    size: '12×6×3',
    weight: '0.15kg',
    quantity: 200,
    price: 199.00,
    createTime: '2023-02-01',
    expiredTime: '2025-02-01',
    status: '冻结',
  },
])
</script>

<template>
  <div>
    <FaPageMain>
      <div class="mb-4 flex justify-between">
        <div class="button-group" />

        <div class="search-wrapper">
          <el-select
            v-model="city"
            multiple
            placeholder="仓库名称"
            style="width: 200px;"
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="city"
            multiple
            placeholder="库位名称"
            style="width: 200px;"
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="city"
            multiple
            placeholder="商品名称"
            style="width: 200px;"
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="city"
            multiple
            placeholder="状态"
            style="width: 200px;"
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          style="width: 100%;"
          max-height="calc(100vh - 200px)"
          :fit="true"
        >
          <el-table-column type="selection" />
          <el-table-column prop="id" label="库存编号" />
          <el-table-column prop="warehouseName" label="仓库名称" />
          <el-table-column prop="locationName" label="库位名称" />
          <el-table-column prop="locationId" label="库位ID" />
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="price" label="价格">
            <template #default="{ row }">
              ¥{{ row.price.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="120" />
          <el-table-column prop="expiredTime" label="过期时间" width="120" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === '正常' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-wrapper">
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="tableData.length"
        />
      </div>
    </FaPageMain>
  </div>
</template>

<style scoped>
.search-wrapper {
  display: flex;
  gap: 12px;
}

.table-wrapper {
  margin-top: 16px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
